<script setup lang="ts">
import { computed } from "vue"
import panelChart from "./panelChart.vue";
import { useCurrentData } from "@/store/processFlow"

const currentData = useCurrentData();
const activeItem = computed(() => currentData.activeItem)
// /nifi/group?processGroupId=0d475669-018a-1000-b898-4be99f56952c&componentIds=
const isFullScreen = computed(() => currentData.isFullScreen)
</script>

<template>
  <div w-full h-full>
    <div w-full min-h-400 box-border rd-4 overflow-hidden b="1px solid #E1E7E4" class="shadow-panel-1" :style="isFullScreen ? 'height:100%' :'height:calc(100vh - 550px)'">
      <iframe w-full h-full b-none :src="`/nifi-page/nifi/home-graph?processGroupId=${activeItem.id}&componentIds=`"></iframe>
    </div>
    <div v-if="!isFullScreen" w-full h-188 mt-16 flex gap-16 justify-between>
      <panel-chart title="输入字节（KB）" name="inputBytes"></panel-chart>
      <panel-chart title="输出字节（KB）" name="outputBytes"></panel-chart>
      <panel-chart title="队列输入字节（KB）" name="queuedBytes"></panel-chart>
      <panel-chart title="队列输出字节（KB）" name="queuedCount"></panel-chart>
    </div>
  </div>
</template>
